<template>
  <view class="battery-add-container">
    <!-- 页面标题 -->
    <view class="page-header">
      <text class="page-title">{{isEdit ? '编辑电池' : '添加电池'}}</text>
    </view>

    <scroll-view class="form-container" scroll-y>
      <!-- 配置电池表单 -->
      <view class="form-card">
        <view class="card-header">
          <text class="card-title">配置电池</text>
        </view>

        <view class="form-section">
          <!-- 电池编号 -->
          <view class="form-item required">
            <text class="form-label">电池编号</text>
            <input 
              class="form-input" 
              placeholder="请输入电池编号" 
              v-model="formData.batterySn"
              maxlength="50"
            />
          </view>

        
          <!-- 电池类型选择 -->
          <view class="form-item required">
            <text class="form-label">电池类型选择</text>
            <view class="battery-type-selector">
              <view 
                class="type-option" 
                v-for="batteryType in batteryTypeOptions" 
                :key="type.id"
                :class="{active: formData.batteryTypeId === batteryType.id}"
                @click="selectBatteryType(batteryType)"
              >
                <view class="type-header">
                  <text class="type-ownership">{{batteryType.ownership}}</text>
                  <text class="type-name">{{batteryType.name}}</text>
                </view>
                <view class="type-check">
                  <view class="check-circle" :class="{checked: formData.batteryTypeId === batteryType.id}">
                    <text class="check-icon" v-if="formData.batteryTypeId === batteryType.id">✓</text>
                  </view>
                </view>
              </view>
            </view>
          </view>

         

          <!-- 电池类型 -->
          <view class="form-item">
            <text class="form-label">电池类型</text>
            <input 
              class="form-input" 
              placeholder="自动填充选择的电池类型" 
              v-model="formData.type"
              disabled
            />
          </view>

          <!-- 电池电压 -->
          <view class="form-item">
            <text class="form-label">电池电压</text>
            <input 
              class="form-input" 
              placeholder="自动填充" 
              v-model="formData.currentVoltage"
              disabled
            />
          </view>

          <!-- 电池品牌 -->
          <view class="form-item">
            <text class="form-label">电柜编号</text>
            <input 
              class="form-input" 
              placeholder="自动填充" 
              v-model="formData.cabinetSn"
              disabled
            />
          </view>

          <!-- 电池材料类型 -->
          <view class="form-item">
            <text class="form-label">仓门编号</text>
            <input 
              class="form-input" 
              placeholder="自动填充" 
              v-model="formData.doorSn"
              disabled
            />
          </view>

          <!-- 电池串数 -->
          <view class="form-item">
            <text class="form-label">循环次数</text>
            <input 
              class="form-input" 
              placeholder="循环次数" 
              v-model="formData.cycleCount"
              disabled
            />
          </view>

          <!-- 电池容量 -->
          <view class="form-item">
            <text class="form-label">电池容量</text>
            <input 
              class="form-input" 
              placeholder="电池容量" 
              v-model="formData.capacity"
              disabled
            />
          </view>

          <!-- 电池实际容量 -->
          <view class="form-item">
            <text class="form-label">电池温度</text>
            <input 
              class="form-input" 
              placeholder="电池温度" 
              v-model="formData.batteryTemperature"
              disabled
            />
          </view>
        </view>
      </view>
    </scroll-view>

    <!-- 底部操作栏 -->
    <view class="action-bar">
      <button class="action-btn cancel-btn" @click="handleCancel">取消</button>
      <button class="action-btn confirm-btn" @click="handleConfirm">确认{{isEdit ? '保存' : '添加'}}</button>
    </view>
  </view>
</template>

<script>
import api from '@/config/api.js'
export default {
  data() {
    return {
      isEdit: false,
      batteryId: null,
      formData: {
        batterySn: '',
        batteryTypeId: '',
        cabinetSn: '',
        doorSn: '',
        currentVoltage: '',
        cycleCount: '',
        capacity: '',
        batteryTemperature: ''
      },
      brandOptions: ['明唐', '天能', '超威', '星恒'],
      ownershipOptions: [
        { value: 'own', label: '自有电池' },
        { value: 'lease', label: '租赁电池' }
      ],
      batteryTypeOptions: []
    }
  },

  onLoad(options) {
    if (options.id) {
      this.isEdit = true
      this.batteryId = options.id
      this.loadBatteryDetail()
    }
    this.loadFormOptions()
  },

  methods: {
    async loadFormOptions() {
      try {
       
        // 加载电池类型列表
        const batteryTypesResult = await api.battery.getBatteryTypeList()
        if (batteryTypesResult && batteryTypesResult.data) {
          this.batteryTypeOptions = batteryTypesResult.data
        }

      } catch (error) {
        console.error('加载表单选项失败:', error)
      }
    },

    async loadBatteryDetail() {
      try {
        const res = await api.battery.getBatteryDetail(this.batteryId)
		const result=res.data
        if (result) {
          this.formData = {
            batterySn: result.batterySn || '',
            batteryTypeId: result.batteryTypeId || '',
            currentVoltage: result.currentVoltage || '',
            cabinetSn: result.cabinetSn || '',
            doorSn: result.doorSn || '',
			cycleCount: result.cycleCount || '',
			capacity: result.capacity || '',
			batteryTemperature: result.batteryTemperature || '',
          }
        }
      } catch (error) {
        console.error('加载电池详情失败:', error)
      }
    },


    selectBatteryType(type) {
      this.formData.batteryTypeId = type.id
    },

    validateForm() {
      if (!this.formData.code) {
        uni.showToast({ title: '请输入电池编号', icon: 'none' })
        return false
      }
     
      if (!this.formData.batteryTypeId) {
        uni.showToast({ title: '请选择电池类型', icon: 'none' })
        return false
      }
      return true
    },

    async handleConfirm() {
      if (!this.validateForm()) {
        return
      }
      try {
        uni.showLoading({
          title: this.isEdit ? '保存中...' : '添加中...',
          mask: true
        })

        if (this.isEdit) {
          await api.battery.updateBattery(this.batteryId, this.formData)
          uni.showToast({
            title: '保存成功',
            icon: 'success'
          })
        } else {
          await api.battery.addBattery(this.formData)
          uni.showToast({
            title: '添加成功',
            icon: 'success'
          })
        }

        // 返回上一页
        setTimeout(() => {
          uni.navigateBack()
        }, 1500)

      } catch (error) {
        console.error(this.isEdit ? '保存电池失败:' : '添加电池失败:', error)
        uni.showToast({
          title: this.isEdit ? '保存失败' : '添加失败',
          icon: 'none'
        })
      } finally {
        uni.hideLoading()
      }
    },

    handleCancel() {
      uni.navigateBack()
    }
  }
}
</script>

<style scoped>
.battery-add-container {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 120rpx;
}

/* 页面标题 */
.page-header {
  background-color: #fff;
  padding: 30rpx;
  border-bottom: 1rpx solid #eee;
}

.page-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #333;
}

/* 表单容器 */
.form-container {
  height: calc(100vh - 200rpx);
  padding: 20rpx;
}

.form-card {
  background-color: #fff;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
}

.card-header {
  padding: 30rpx;
  border-bottom: 1rpx solid #f0f0f0;
}

.card-title {
  font-size: 32rpx;
  font-weight: bold;
  color: #333;
}

.form-section {
  padding: 0 30rpx 30rpx;
}

/* 表单项 */
.form-item {
  margin-bottom: 30rpx;
}

.form-item.required .form-label::before {
  content: '*';
  color: #f5222d;
  margin-right: 8rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  font-weight: 500;
  color: #333;
  margin-bottom: 16rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  color: #333;
  border: 1rpx solid #e8e8e8;
}

.form-input:disabled {
  background-color: #fafafa;
  color: #999;
}

/* 选择器 */
.form-picker {
  width: 100%;
}

.picker-content {
  width: 100%;
  height: 80rpx;
  background-color: #f5f5f5;
  border-radius: 8rpx;
  padding: 0 20rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1rpx solid #e8e8e8;
}

.picker-text {
  font-size: 28rpx;
  color: #333;
}

.picker-text.placeholder {
  color: #999;
}

.picker-arrow {
  font-size: 24rpx;
  color: #999;
}

/* 电池类型选择器 */
.battery-type-selector {
  border: 1rpx solid #e8e8e8;
  border-radius: 8rpx;
  overflow: hidden;
}

.type-option {
  padding: 24rpx;
  border-bottom: 1rpx solid #f0f0f0;
  position: relative;
  background-color: #fafafa;
}

.type-option:last-child {
  border-bottom: none;
}

.type-option.active {
  background-color: #e6f7ff;
  border-color: #1890ff;
}

.type-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16rpx;
}

.type-ownership {
  font-size: 24rpx;
  color: #1890ff;
  background-color: #e6f7ff;
  padding: 4rpx 12rpx;
  border-radius: 4rpx;
}

.type-name {
  font-size: 28rpx;
  font-weight: bold;
  color: #333;
}

.type-specs {
  margin-bottom: 16rpx;
}

.spec-row {
  display: flex;
  margin-bottom: 8rpx;
  font-size: 24rpx;
}

.spec-label {
  color: #999;
  width: 140rpx;
}

.spec-value {
  color: #333;
  width: 140rpx;
  font-weight: 500;
}

.type-check {
  position: absolute;
  top: 24rpx;
  right: 24rpx;
}

.check-circle {
  width: 40rpx;
  height: 40rpx;
  border: 2rpx solid #ddd;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.check-circle.checked {
  background-color: #1890ff;
  border-color: #1890ff;
}

.check-icon {
  color: #fff;
  font-size: 24rpx;
  font-weight: bold;
}

/* 单选组 */
.radio-group {
  display: flex;
  gap: 40rpx;
}

.radio-item {
  display: flex;
  align-items: center;
}

.radio-text {
  font-size: 28rpx;
  color: #333;
  margin-left: 12rpx;
}

/* 底部操作栏 */
.action-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #fff;
  padding: 20rpx 30rpx;
  display: flex;
  gap: 20rpx;
  border-top: 1rpx solid #eee;
  box-shadow: 0 -4rpx 20rpx rgba(0,0,0,0.06);
}

.action-btn {
  flex: 1;
  height: 80rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
  font-weight: bold;
  line-height: 80rpx;
}

.cancel-btn {
  background-color: #f5f5f5;
  color: #333;
  border: 1rpx solid #e8e8e8;
}

.confirm-btn {
  background-color: #1890ff;
  color: #fff;
}
</style>